'use client' import { useState, useEffect } from 'react' import { Button } from "@/components/ui/button" const vegetables = ['Broccoli', 'Green Beans', 'Apple', 'Banana'] const fats = ['Avocado', 'Olive Oil', 'Butter', 'Almond Butter'] const proteins = ['Ground Turkey', 'Grass-fed Sirloin', 'Eggs', 'Shredded Chicken'] const carbs = ['Sweet Potato', 'Chickpeas', 'White Rice', 'Quinoa'] export default function Component() { const [vegetable, setVegetable] = useState(vegetables[0]) const [fat, setFat] = useState(fats[0]) const [protein, setProtein] = useState(proteins[0]) const [carb, setCarb] = useState(carbs[0]) const [isSpinning, setIsSpinning] = useState(false) const spin = () => { setIsSpinning(true) const duration = 2000 // 2 seconds const interval = 100 // 0.1 second let elapsed = 0 const spinInterval = setInterval(() => { setVegetable(vegetables[Math.floor(Math.random() * vegetables.length)]) setFat(fats[Math.floor(Math.random() * fats.length)]) setProtein(proteins[Math.floor(Math.random() * proteins.length)]) setCarb(carbs[Math.floor(Math.random() * carbs.length)]) elapsed += interval if (elapsed >= duration) { clearInterval(spinInterval) setIsSpinning(false) } }, interval) } useEffect(() => { spin() // Initial spin when component mounts }, []) return (

Balanced Meal Slot Machine

Vegetable/Fruit

{vegetable}

Fat

{fat}

Protein

{protein}

Starchy Carbohydrate

{carb}

) }